body,input{box-sizing: border-box;}
.wrapper{width:1184px;margin: 0 auto;}
.thumbnail img{display: block;width: 100%;}
.menu-box{width: 100%;background: rgba(70, 70, 70, 0.3);position: fixed;z-index: 19;}
.menu{width:1184px;height:89px;margin: 0 auto;padding: 22px 0;}
.menu .logo{width: 206px;}
#nav{width:867px;margin-top: 8px;position: fixed;right: 0;top: 10px;z-index: 9;}
#nav li{float: left;margin-left: 15px;}
#nav li a{display: block;padding: 7px 25px;color:#fff;font-size: 16px;}
#nav li.active a,#nav li a:hover{background: #0490fc;border-radius: 3px;}
.bg{position: absolute;left: 0;top:0;width: 100%;min-width: 1184px;height: 100%;}
.bg img{display: block;width: 100%;height: 100%;}
/***第一屏****/
.section1{background: url(../images/bg1.png) no-repeat top center;}
.content-area{position: absolute;z-index: 1;color: #fff;width: 100%;height:100%;top: 0;}
.content-area h3{font-size: 48px;}
.p1-1{position: absolute;top:40%;left: 50%;transform: translateX(-50%) scale(.5,.5);-webkit-transform: translateX(-50%) scale(.5,.5);white-space: nowrap;opacity: 0;transition: all 1.3s;}
.p1-1 span{color: #0490fc;}
.p1-2{position: absolute;/* top:30%; */bottom: 0;left:50%;transform:translateX(-50%);white-space: nowrap;opacity: 0;transition: all 1s .5s;font-size:30px;height: auto;}
.active .p1-1{opacity: 1; -webkit-transform: translateX(-50%) scale(1, 1); transform: translateX(-50%) scale(1, 1);}
.active .p1-2{opacity: 1;bottom: 50%;margin-bottom: -30px;}
/*透明缩放动画*/
.scale{opacity: 0;transform: scale(.5,.5);-webkit-transform: scale(.5,.5);transition: all .9s ease-in-out;}
.active .scale{opacity: 1;transform: scale(1,1);-webkit-transform: scale(1,1);transition-delay: .3s;}
.tr_left{opacity: 0;transform: translateX(-300px);transition: all .9s ease-in-out;}
.active .tr_left{opacity: 1;transform: translateX(0);}
.tr_right{opacity: 0;transform: translateX(300px);transition: all .9s ease-in-out;}
.active .tr_right{opacity: 1;transform: translateX(0);}
/***第二屏**/
.content{position: relative;}
.title{border-bottom: 1px solid #eaeaea;padding-bottom: 26px;margin-bottom: 15px;text-align: center;position: relative;}
.title h1{font-size: 36px;font-weight: normal;}
.title .etitle{font-size: 14px;color: #999999;text-transform: uppercase;}
.title:after{display: block;position: absolute;content:"";width: 38px;height: 6px;background: #0076ca;bottom: -3px;left: 50%;margin-left: -19px;}
.p2{width: 1070px;margin: 0 auto;position: relative;}
.p2 li{width: 18%;float: left;margin-left: 7%;text-align: center;}
.p2 li .icon{width:151px;height: 151px;border-radius: 50%;background:#ededed url(../images/p2.png) no-repeat;margin: 0 auto;margin-bottom: 25px;background-position-y: 36px;transition: background-color .3s ease-in-out;}
.p2 li:hover .icon{background-color:#0490fc;background-position-y: -78px;}
.p2 li h3{font-size: 16px;color: #525252;}
.p2 li p{font-size:14px;color:#666666}
.p2 li:first-child{margin-left: 0;}
.p2 li:first-child .icon{background-position-x:38px;}
.p2 li:nth-child(2) .icon{background-position-x:-246px;}
.p2 li:nth-child(3) .icon{background-position-x:-532px;}
.p2 li:nth-child(4) .icon{background-position-x:-818px;}
.p2 li:first-child,.p2 li:nth-child(4){transition-delay: 1s;}
.p2 li:nth-child(2),.p2 li:nth-child(3){transition-delay: .6s;}

/*******第三屏******/
.section3{background: url(../images/bg3.png) no-repeat top center;}
.tab-tit{text-align: center;margin-left: -20px;}
.tab-tit li{display: inline-block;text-align: center;padding: 8px 26px;font-size: 14px;border:1px solid #e1e1e2;border-radius: 8px;background: #fff;cursor: pointer;margin-bottom: 30px;margin-left: 20px;}
.tab-tit li.select{background: #0490fc;color:#fff}
.tab-con .tabs-info{margin-left: -10px;display: none;}
.tabs-info li{float: left;width: 288.5px;border:1px solid #e4e4e4;margin-left: 10px;transition:all .3s ease-in-out;opacity: 0;}

.tabs-info li .thumbnail{width:100%;height: 241px;overflow: hidden;}
.tabs-info li .thumbnail img{transition: all .6s ease-in-out; }
.tabs-info li a{color: #333333;}
.tabs-info li a:hover .thumbnail img{transform: scale(1.1,1.1);}
.tab-info-text{border-top:1px solid #e4e4e4;position: relative;background: #fff;padding: 18px 19px;transition: all .3s ease-in;}
.tab-info-text:before{position: absolute;display: block;content: "";width: 15px;height: 15px;right:40px;top: -9px;background:inherit;transform: rotate(45deg);border-top: 1px solid #e4e4e4;border-left: 1px solid #e4e4e4;}
.pro-name{font-size: 14px;padding-bottom: 5px;}
.pro-name .label,.pro-name-spec{color: #888888;font-size: 12px;transition: all .3s ease-in-out;}
p.lines{border-bottom: 1px dashed #e2e2e2;width: 206px;padding-bottom: 6px;}
.pro-name-spec .lines{padding-bottom: 30px;}
.tabs-info li a:hover,.tabs-info li a:hover .label,.tabs-info li a:hover .pro-name-spec{color: #fff;}
.tabs-info li a:hover .tab-info-text{background: #0490fc;color:#fff}
/*****第四屏******/
.section4{background: url(../images/bg4.png) no-repeat top center;}
.process-lines{text-align: center;margin-top: 170px;margin-left: -18px;opacity: 0;transition: all 1.8s ease-in-out .3s;}
.active .process-lines{opacity: 1;}
.process-lines li{display: inline-block;width:120px;margin: 0 6px 0 18px;height: 1px;background: #a8a8a8;position: relative;}
.process-lines li:before{display: block;content: "";width: 6px;height: 6px;position: absolute;top: -2.5px;background: #a8a8a8;border-radius: 50%;}
.process-lines li:before{left: -18px;}
.process-lines li:first-child:before{display: none;}
.process-txt{position: relative;}
.process-txt li{position: absolute;width: 147px;text-align: center;font-size: 14px;font-weight: bold;cursor: pointer;opacity: 0;transition: all .6s ease-in;}
.active .process-txt li{opacity: 1;}
.process-txt li h3{position: relative;}
.process-txt li h3:after{display: block;content: "";position: absolute;left: 63px;}
.order-num{display: block;width: 23px;height: 23px;border-radius: 50%;background: #a8a8a8;text-align: center;margin: 0 auto;color:#fff;line-height: 23px;font-family: "Agency FB";font-weight: bold;transition: all .3s ease-in-out;}
.process-txt li:hover .order-num{background: #0490fc;}
.process-txt li:hover p,.process-txt li:hover h3{transition: all .3s ease-in-out;}
.process-txt li:hover p,.process-txt li:hover h3{color: #0490fc;}

.commomTop1{bottom:19px}
.commomTop2{top: 11px;}

/*****第五屏******/
.section5{background: #f7f7f7;min-width: 1184px;}
.about-box{background: #fff;padding:1.3%;margin-top: 2%;border: 1px solid #f1f1f1;opacity: 0;}
.about-box p{font-size: 16px;color:#333333;margin: 0.5% auto;}

/*****第六屏******/
.title-spec{border-bottom-color: #fff;}
.title-spec:after{background: #fff;}
.title-spec,.title-spec .etitle{color:#ffffff;}
.contact-box{padding: 1% 25px;}
.contact-left{max-width: 412px;opacity: 0;}
.contact-left .qr-code{width: 141px;height: 141px;overflow: hidden;}
.con-email,.con-tell,.con-addr{color: #fff;margin-top: 14.5%;font-size: 14px;position: relative;margin-left: 35px;}
.con-email:before,.con-tell:before,.con-addr:before{display: block;content: "";width: 27px;height: 100%;position: absolute;background:url(../images/p6-1.png) no-repeat;left:-35px;top: 0;}
.con-email:before{background-position: 0px 2px;}
.con-tell:before{background-position: 0 -77px;}
.con-addr:before{background-position: 0 -158px;}
.con-email a{color: #fff;}
.contact-right{max-width: 480px;opacity: 0;}
.contact-right .form-box{margin-top: 25px;}
.form-box .label{color: #fff;font-size: 16px;display: inline-block;width: 40px;}
.form-box input,.form-box textarea{background: rgba(255,255,255,.8);padding: 8px 12px;border: 1px solid #ececec;width: 384px;color: #000;font-size: 14px;resize: none;vertical-align: middle;border-radius:3px;transition: all .3s ease-in-out;}
.form-box input:focus,.form-box textarea:focus{border-color:#389cff;}
#submit{width: 221px;height: 45px;background: #389cff;color:#fff;font-size: 16px;margin-left: 40px;border: none;cursor: pointer;transition: all .3s ease;border-radius: 2px;}
#submit:hover{background: #1f8dfb;}
.footer{background: #393939;width: 100%;color:#fff;text-align: center;font-size: 14px;padding: 20px 0;}
.footer p{margin-top: 10px;}
.footer a{color: #fff;transition: all .3s ease;}
.footer a:hover{color: #389cff;}


.section1,.section3{background-size: cover;background-attachment: fixed;}
/*****案例页面******/
.pro-wrap{background: #f7f7f7;}
.pro-content{padding: 20px 0 50px;}
.header{width: 100%;min-width: 1184px;height:310px;background: url(../images/demo_bg.png) no-repeat top center;background-size: cover;}
.pro-menu-box{width: 100%;background: rgba(255,255,255,.16);}
.pro-nav li{float: left;margin-left: 15px;}
.pro-nav li a{display: block;padding: 7px 25px;color:#fff;font-size: 16px;}
.pro-nav li.active a,.pro-nav li a:hover{background: #0490fc;border-radius: 3px;}
.pro-title{font-size: 22px;font-weight: normal;position: relative;padding-left: 15px;margin: 25px 0 25px 0;color:#333333}
.pro-title:before{display: block;content: "";width: 6px;height: 100%;position:absolute;background: #00a0e9;border-radius: 4px;left: 0;}
.pro-intros{margin-bottom: 20px;}
.pro-info-name{font-size: 20px;}
.pro-date-time{margin-left: 20px;line-height: 31px;color: #666666;font-size: 14px;}
.pro-date-time span,.pro-infos span{color: #333333;padding-right: 10px;}
.pro-infos{font-size: 14px;color: #666666;line-height: 23px;margin-bottom: 5px;}
.pro-txt-intro{margin-bottom: 20px;}
.pro-img{text-align: center;max-width: 100%;text-align: center;border-radius: 3px;overflow: hidden;}
/*css3动画*/
@-webkit-keyframes fadeInUp {
0% {
opacity:1;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInUp {
0% {
opacity:1;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInUp {
	-webkit-animation: fadeInUp .5s forwards;
	animation: fadeInUp .5s forwards;
}
@-webkit-keyframes fadeInDown {
0% {
opacity:0;
-webkit-transform:translate3d(0, -100%, 0);
transform:translate3d(0, -100%, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInDown {
0% {
opacity:0;
-webkit-transform:translate3d(0, -100%, 0);
transform:translate3d(0, -100%, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInDown {
	-webkit-animation: fadeInDown .5s forwards;
	animation: fadeInDown .5s forwards;
}
@-webkit-keyframes zoomInUp {
0% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.175, .885, .32, 1)
}
100% {
opacity:1;
-webkit-transform:scale3d(1, 1, 1) translate3d(0, 0, 0);
transform:scale3d(1, 1, 1) translate3d(0, 0, 0);
-webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.175, .885, .32, 1)
}
}
@keyframes zoomInUp {
0% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.175, .885, .32, 1)
}
100% {
opacity:1;
-webkit-transform:scale3d(1, 1, 1) translate3d(0, 0, 0);
transform:scale3d(1, 1, 1) translate3d(0, 0, 0);
-webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.175, .885, .32, 1)
}
}
.zoomInUp {
	-webkit-animation: zoomInUp 1s .3s forwards ;
	animation: zoomInUp 1s .3s forwards;
}
@-webkit-keyframes zoomOut {
0% {
opacity:1
}
50% {
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3)
}
50%, to {
opacity:0
}
}
@keyframes zoomOut {
0% {
opacity:1
}
50% {
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3)
}
50%, to {
opacity:0
}
}
.zoomOut {
	-webkit-animation: zoomOut .5s;
	animation-name: zoomOut .5s;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInLeft {
0% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInLeft {
	-webkit-animation: fadeInLeft .6s .3s forwards ;
	animation-name: fadeInLeft .6s .3s forwards;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity:1
}
to {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
}
@keyframes fadeOutLeft {
0% {
opacity:1
}
to {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
}
.fadeOutLeft {
	-webkit-animation: fadeOutLeft .6s forwards;
	animation: fadeOutLeft .6s forwards;
}
@-webkit-keyframes fadeInRight {
0% {
opacity:0;
-webkit-transform:translate3d(100%, 0, 0);
transform:translate3d(100%, 0, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInRight {
0% {
opacity:0;
-webkit-transform:translate3d(100%, 0, 0);
transform:translate3d(100%, 0, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInRight {
	-webkit-animation: fadeInRight .6s .3s forwards;
	animation: fadeInRight .6s .3s forwards;
}
@-webkit-keyframes fadeOutRight {
0% {
opacity:1
}
to {
opacity:0;
-webkit-transform:translate3d(100%, 0, 0);
transform:translate3d(100%, 0, 0)
}
}
@keyframes fadeOutRight {
0% {
opacity:1
}
to {
opacity:0;
-webkit-transform:translate3d(100%, 0, 0);
transform:translate3d(100%, 0, 0)
}
}
.fadeOutRight {
	-webkit-animation: fadeOutRight .6s forwards;
	animation: fadeOutRight .6s forwards;
}